<template>
  <div class="bgimg">
    <Header active-index="2" />
    <!-- Breadcrumb Start -->
    <div class="main-bg">
      <div class="subbox">
        <h2 class="title">个人中心</h2>
        <div class="navbox">
          <ul>
            <li><i class="el-icon-arrow-right" />首页</li>
            <li class="active"><i class="el-icon-arrow-right" />个人中心</li>
          </ul>
        </div>
      </div>
    </div>
    <el-main>
      <el-tabs
        v-model="$route.query.activeName"
        :tab-position="tabPosition"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="个人信息" name="first">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/01-1.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />个人信息</span
              >
            </span>
          </span>

          <Info />
        </el-tab-pane>
        <el-tab-pane label="我的发布" name="second">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/02-2.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />我的发布</span
              >
            </span>
          </span>
          <Wodefabu />
        </el-tab-pane>
        <el-tab-pane label="我的交易" name="third">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/03-3.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />我的交易</span
              >
            </span>
          </span>
          <WodeJiaoyi />
        </el-tab-pane>
        <el-tab-pane label="我的电表" name="fourth">
          <span slot="label">
            <span class="span-box">
              <span
                ><img
                  :src="$imgURL + 'tab/04-4.png'"
                  class="img-fluid"
                  alt="能源区互动交易平台"
                />我的电表</span
              >
            </span>
          </span>
          <WodeJiaoge />
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <Footer />
  </div>
</template>

<script>
import Header from "@/components/header/index.vue";
import Footer from "@/components/footer/index.vue";
import Info from "@/components/userCenter/Info/index.vue";
import Wodefabu from "@/components/userCenter/wodefabu/index.vue";
import WodeJiaoyi from "@/components/userCenter/wodejiaoyi/index.vue";
import WodeJiaoge from "@/components/userCenter/wodejiaoge/index.vue";
export default {
  components: {
    Header,
    Footer,
    Info,
    Wodefabu,
    WodeJiaoyi,
    WodeJiaoge,
  },
  data() {
    return {
      activeName: "first",
      tabPosition: "left",
    };
  },
  created() {
    if (this.$route.query.activeName !== undefined) {
      this.activeName = this.$route.query.activeName;
    }
  },
  methods: {
    // tabs标签页切换事件
    handleClick(tab, event) {},
  },
};
</script>
<style scoped>
</style>
